<template>
  <div>
    <el-form-item label="固定容量" v-if="type==='limit'">
      <el-switch v-model="value.has_capacity"></el-switch>
    </el-form-item>
    <el-form-item label="选项">
      <el-table
        :data="value.choices"
        style="width: 100%">
        <el-table-column
          label="选项"
          width="180">
          <template slot-scope="scope">
            <el-input
              placeholder="选项"
              v-model="value.choices[scope.$index]">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          v-if="value.has_capacity"
          label="容量"
          width="180">
          <template slot-scope="scope">
            <el-input-number
              v-model="value.capacity[scope.$index]"
              size="small"
              :min="0">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              circle
              size="small"
              icon="el-icon-arrow-up"
              :disabled="scope.$index == 0"
              @click="move_up(scope.$index)">
            </el-button>
            <el-button
              circle
              size="small"
              icon="el-icon-arrow-down"
              :disabled="scope.$index + 1 == value.choices.length"
              @click="move_down(scope.$index)">
            </el-button>
            <el-button
              circle
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="delete_row(scope.$index)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        circle
        size="medium"
        type="primary"
        icon="el-icon-plus"
        class="button-add-choice"
        @click="value.choices.push(''); value.capacity.push(0)">
      </el-button>
    </el-form-item>
    <el-form-item
      label="正确答案"
      v-if="type==='exam'"
      >
      <el-checkbox-group v-model="value.checkbox_answer">
        <el-checkbox 
                         v-for="(content, index) in value.choices"
                         :key="index"
                         :label="index">
          {{content}}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>

<script>
export default {
  props: ["value", "type"],
  data () {
    return {
    }
  },
  methods: {
    delete_row(index) {
      this.value.choices.splice(index, 1);
      this.value.capacity.splice(index, 1);
    },
    move_up(index) {
      if (index == 0) {
        return
      }
      var tmp = this.value.choices.splice(index, 1)[0]
      this.value.choices.splice(index - 1, 0, tmp)
      tmp = this.value.capacity.splice(index, 1)[0]
      this.value.capacity.splice(index - 1, 0, tmp)
    },
    move_down(index) {
      if (index + 1 == this.value.choices.length) {
        return
      }
      var tmp = this.value.choices.splice(index, 1)[0]
      this.value.choices.splice(index + 1, 0, tmp)
      tmp = this.value.capacity.splice(index, 1)[0]
      this.value.capacity.splice(index + 1, 0, tmp)
    }
  },
  computed: {
  }
}
</script>

<style lang="sass">
.button-add-choice
  margin: .5cm
</style>
